<template>
	<view class="timer">
		<!-- <van-count-down :time="time">
			<template #default="timeData">
				<span class="block">{{ timeData.hours }}</span>
				<span class="colon">:</span>
				<span class="block">{{ timeData.minutes }}</span>
				<span class="colon">:</span>
				<span class="block">{{ timeData.seconds }}</span>
			</template>
		</van-count-down> -->
		<uni-countdown :show-day="false" :hour="12" :minute="12" :second="12" color="#FFFFFF"
			background-color="#000000"></uni-countdown>
	</view>
</template>

<script setup lang="ts">
	// import { ref } from 'vue'
	// const time = ref(30 * 60 * 60 * 1000);
</script>

<style lang="scss" scoped>
	.colon {
		display: inline-block;
		margin: 0 4px;
		color: #0C0D10;
	}

	.block {
		display: inline-block;
		width: 48px;
		height: 48px;
		color: #fff;
		font-size: 12px;
		text-align: center;
		line-height: 48px;
		background-color: #0C0D10;
		border-radius: 10px;
	}

	.timer {
		margin-right: 20px;
	}
</style>